<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>订单确认付款</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
	<script src="lib/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/vue.js"></script>
	<script src="app/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="overflow-x: hidden">
<div id="app">
    <div class="buy_all" >
        <div class="buy_header">
            <a :href="commodityHref" class="iconfont">&#xe681;</a><span>订单确认</span>
        </div>
        <form>
            <div class="buy_header2">
                <span>收货人信息</span><a href="javascript:void(0);" id="saveAddress">保存地址</a>
            </div>
            <div class="buy_center">
                <input type="text" id="payName" placeholder="姓名" style="margin-top: 0.2667rem">
                <input type="text" id="payPhone" placeholder="手机号码">
                <input type="text" id="proCity" placeholder="省份-城市-小区" :value="pro" @focus="changeAppear()">
                <ul class="province_box clearfix">
                    <li v-for="(item,index) in proList" @click="choosePro(index)" v-show="clickFlag">{{item.province}}</li>
                </ul>
                <input type="text" id="detailAddress" placeholder="详细地址">
            </div>
            <div class="buy_msg">
                <span>购买详情</span>
            </div>
            <div class="buy_project">
                <div class="buy_project_first">
                    <img :src="commodityImg">
                    <p>{{commodityName}} x{{num}}</p>
                </div>
                <div class="buy_project_second">
                    <span>购买数量</span><a href="javascript:void(0);" style="margin-right: 5.84%;" v-on:click="addValue()">+</a><input type="text" value="1" id="payIpt" v-model="num"><a href="javascript:void(0);" id="paySub" v-on:click="subValue()">-</a>
                </div>
                <div class="buy_project_third">
                    <span>商品金额 :</span><p>￥{{commodityPrice}}</p>
                </div>
            </div>
            <div class="buy_msg2">
                <span>优惠及服务</span>
            </div>
            <div class="buy_project_four">
                <span>应付金额 :</span><p> ￥{{commodityPrice*num}}</p><button type="button">确认并付款</button>
            </div>
        </form>
    </div>
    <div class="pay-box">
    	<div class="pay">
    		<div class="pay-head">
    			<span class="iconfont">&#xe68d;</span>
    			<span>付款详情</span>
    			<a href="javascript:void(0)" class="iconfont">&#xe7ee;</a>
    		</div>
    		<form >
    			<table >
    			<tbody>
    				<tr>
    					<td>订单信息<span>{{commodityName}}</span></td>
    				</tr>
    				<tr>
    					<td>支付宝账号<a href="javascript:void(0)">1963427 ></a></td>
    				</tr>
    				<tr>
    					<td>付款方式<a href="javascript:void(0)">工商银行（9929）></a></td>
    				</tr>
    				<tr>
    					<td>订单金额<span>{{commodityPrice}} X {{num}} = {{commodityPrice*num}}元</span></td>
    				</tr>
    				<tr>
    					<td class="pay-active">需付款<span>{{commodityPrice*num}}元</span></td>
    				</tr>
    			</tbody>
    		</table>
    		<button type="button"><a href="paySuccess.html">确认付款</a></button>
    		</form>
    	</div>
    </div>
</div>
<ul class="city_box clearfix" id="cityBox">
    <li v-for="(cc,index) in cityList" @click="chooseCity(index)">{{cc.city}}</li>
</ul>
</body>
</html>
<script>
var commonUrl = 'http://172.30.31.254:8080/youhuishop/';
var proData;
var proCode;
var cityList;
var vm;
var childVm;
var commodityImg,commodityName,commodityPrice;
var sid = window.localStorage.getItem('sid');
var id = location.search.split('=')[1];
$.ajax({
    url: commonUrl + 'api/goods/detail',
    type: 'GET',
    dataType: 'json',
    data: {
        id: id
    },
    success:function (data) {
        console.log(data)
        commodityImg = data.data.img;
        commodityName = data.data.name;
        commodityPrice = data.data.salePrice;
    }
});
$('#cityBox').hide();
$.ajax({
        url:'http://172.30.31.254:8080/youhuishop/api/location/province',
        type:'GET',
        dataType:'json',
        data:{

        },
        success:function (data) {
            console.log(data.data);
            proData = data.data;
            vm=new Vue({
                el:'#app',
                data:{
                    num:1,
                    proList:proData,
                    pro:'',
                    clickFlag:false,
                    commodityHref:'commodity.html?id='+id,
                    commodityImg:commodityImg,
                    commodityName:commodityName,
                    commodityPrice:commodityPrice
                },
                methods:{
                    addValue:function () {
                        vm.num++;
                    },
                    subValue:function () {
                        vm.num--;
                        if(vm.num <= 1){
                            vm.num = 1;
                        }
                    },
                    choosePro:function (index) {
                        vm.pro = proData[index].province;
                        vm.clickFlag = false;
                        $('#cityBox').show();
                        proCode = proData[index].provinceCode;
                        $.ajax({
                            url:'http://172.30.31.254:8080/youhuishop/api/location/city',
                            type:'GET',
                            dataType:'json',
                            data:{
                                provinceCode:proCode
                            },
                            success:function (data) {
                                cityList = data.data;
                            childVm=new Vue({
                                    el:'#cityBox',
                                    data:{
                                        cityList:cityList
                                    },
                                    methods:{
                                        chooseCity:function (index) {
                                            vm.pro += '-'+cityList[index].city;
                                            $('#cityBox')
                                                .hide()
                                                .empty()
                                                .html('<li v-for="(cc,index) in cityList" @click="chooseCity(index)">{{cc.city}}</li>');
                                        }
                                    }
                                })
                            }
                        })
                    },
                    changeAppear:function () {
                        if(vm.pro == ''){
                            this.clickFlag = true;
                        }else{
                            vm.pro = '';
                            this.clickFlag = true;
                        }

                    }
                }
            });
            $('#saveAddress').on('click',function () {
                $.ajax({
                    url:commonUrl+'api/address/save',
                    type:'POST',
                    dataType:'json',
                    data:{
                        sid:sid
                    },
                    success:function (data) {
                        data.data.name = $('#payName').val();
                        data.data.phone = $('#payPhone').val();
                        data.data.provinceCity = $('#proCity').val();
                        data.data.address = $('#detailAddress').val();
                        console.log(data);
                    }
                })
            })
        }
    })


</script>
